
var applicationArray=[
    {abbreviation:"SWMM",model:"Storm Water Management Model",link:"/Hydro/swmm.html"},
    {abbreviation:"SWAT",model:"Soil and Water Assessment Tool",link:"http://geomodeling.njnu.edu.cn/OpenGMS/page/computable-model-info/computable-model-info.html?ZDRjZjIxYjItNzExZC00N2IyLWIwNjctZTlmZGIzMGZjZmMxOGE="},
    {abbreviation:"FVCOM",model:"The Unstructured Grid Finite Volume Community Ocean Model",link:"http://geomodeling.njnu.edu.cn/OpenGMS/page/computable-model-info/computable-model-info.html?MWVkZjk1ODQtM2M1Yy00ZDJiLWE4YTctNmUxMDk5Zjc3ODAzYjM="},
    {abbreviation:"BDS",model:"数字流域系统应用开发软件",link:"http://geomodeling.njnu.edu.cn/OpenGMS/page/computable-model-info/computable-model-info.html?Y2RiZGVkOTUtMDgyZi00YWEyLWE4NWQtNzcxNGQ5YjFlNzczYzI="},
    {abbreviation:"Ecomsed",model:"Ecomsed",link:"http://geomodeling.njnu.edu.cn/OpenGMS/page/computable-model-info/computable-model-info.html?MDc1NmE3NDgtYTc0Mi00YTlhLThmMjYtZDllZDEzMTA1YmZhNGE="},


];

var numOfModelPerRow=5;

$(document).ready(
    function () {

        $("#applications").on("click",function () {
            var modelList=document.getElementById("application-list");
            modelList.innerHTML="";
            var rowNum=Math.ceil(applicationArray.length/numOfModelPerRow);
            for (var i=0;i<rowNum;i++) //行
            {
                var row=document.createElement("div");
                row.setAttribute("class","row");

                for (var j=0;j<numOfModelPerRow;j++)  //每行6个
                {
                    if ((i*numOfModelPerRow+j)<applicationArray.length)
                    {
                        var model=document.createElement("div");
                        model.setAttribute("class","col-md-55");

                        var modelThumbnail=document.createElement("div");
                        modelThumbnail.setAttribute("class","thumbnail");

                        var a=document.createElement("a");
                        a.setAttribute("href",applicationArray[i*numOfModelPerRow+j].link);//每个模型的链接
                        a.setAttribute("target","_blank");  //target 属性规定在何处打开链接文档。_blank 浏览器总在一个新打开、未命名的窗口中载入目标文档。
                        var picPanel=document.createElement("div");
                        picPanel.setAttribute("class","image view view-first");
                        var img=document.createElement("img");
                        img.setAttribute("src","images/model/thumb.png");
                        var mask=document.createElement("div");
                        mask.setAttribute("class","mask");
                        var p=document.createElement("p");
                        p.innerText=applicationArray[i*numOfModelPerRow+j].model;
                        mask.appendChild(p);
                        picPanel.appendChild(img);
                        picPanel.appendChild(mask);
                        a.appendChild(picPanel);
                        modelThumbnail.appendChild(a);

                        var caption=document.createElement("div");
                        caption.setAttribute("class","caption");
                        var p2=document.createElement("p");
                        p2.innerText=applicationArray[i*numOfModelPerRow+j].abbreviation;
                        caption.appendChild(p2);
                        modelThumbnail.appendChild(caption);

                        model.appendChild(modelThumbnail);
                        row.appendChild(model);
                    }


                }
                modelList.appendChild(row);
            }


            for (var i=2;i<rowNum;i++)
            {
                $("#distributed-modelList .row").eq(i).hide();
            }

            $(".modelPanel .expandBtn").html("Expand&nbsp; <i class=\"fa fa-caret-down\"></i>");//给Expand赋以内容
            $(".modelPanel .expand").css("display","block");


        });
    }
);

